<template>
  <el-card class="card-body-np">
    <div class="flex-row" style="height: 148px;padding-top: 10px;" v-for="(data, index) in datas" :key="index" @click="goTopic(data)">
      <div class="" style="width: 110px;height: 110px;">
        <div class="zoomImage" v-lazy:background-image="getImg(data.basicThumbnails)"></div>
      </div>
      <div class="flex-all">
        <el-row>
          <el-col :span="24" >
            <div class="tal-item">
              <p class="tl-title">{{data.basicTitle}}</p>
              <div class="list-footer-fs">
                <p>{{data.basicDescription.substr(0, 60)}}...</p>
                <span>{{$formatYMD(data.ctime)}}</span>
                <span class="fr">{{data.browseNumber}}</span>
                <span class="el-icon-view fr" style="padding-top: 3px;margin-right: 6px;"></span>
              </div>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
  </el-card>
</template>

<script>
  export default {
    title: 'data-list',
    props: {
      datas: {
        type: Array,
        default: function () {
          return [
            {basicThumbnails: 'static/talkone.png', basicTitle: '客户嫌价格贵，其实并不是真的价格贵', basicDescription:'很多的客户在购买时容易嫌价格贵了，其实也许并不是真的贵了，对用户来说太贵的任何产品都是错误的引用。', ctime: 1539236695483, views: 155},
            {basicThumbnails: 'static/talktwo.png', basicTitle: '客户嫌价格贵，其实并不是真的价格贵', basicDescription:'很多的客户在购买时容易嫌价格贵了，其实也许并不是真的贵了，对用户来说太贵的任何产品都是错误的引用。', ctime: 1539236695483, views: 155},
            {basicThumbnails: 'static/talkthree.png', basicTitle: '客户嫌价格贵，其实并不是真的价格贵', basicDescription:'很多的客户在购买时容易嫌价格贵了，其实也许并不是真的贵了，对用户来说太贵的任何产品都是错误的引用。', ctime: 1539236695483, views: 155},
            // {basicThumbnails: 'static/talkfour.png', basicTitle: '客户嫌价格贵，其实并不是真的价格贵', basicDescription:'很多的客户在购买时容易嫌价格贵了，其实也许并不是真的贵了，对用户来说太贵的任何产品都是错误的引用。', ctime: 1539236695483, views: 155}
          ]
        }
      }
    },
    methods: {
      getImg(url) {
        if (url && url.length > 10) {
          return url
        }
        return 'static/talktwo.png'
      },
      goTopic (data) {
      const {href} = this.$router.resolve({
        name: 'topicdetails',
        // query: this.data
        query: { 
          modelId: data.modelId, 
          browseNumber: data.browseNumber,
          comments: data.comments
        }
      })
      window.open(href, '_blank')
    },
    }
  }
</script>
<style>
  .tal-item {
    cursor: pointer;
    padding-bottom: 16px;
    padding-left: 10px;
  }
  .tal-item:hover p {
    color: #94C05A;
  }
  .tal-item > p {
    margin: 0;
  }
  .tal-item > div > p {
    margin: 5px 0;
    margin-bottom: 8px;
    line-height: 1.6;
    /* autoprefixer: on */
    overflow: hidden;
    /* autoprefixer: on */
    text-overflow: ellipsis;
    word-break: break-all;
    display: -webkit-box; /** 对象作为伸缩盒子模型显示 **/
    /*! autoprefixer: off */
    -webkit-box-orient: vertical; /** 设置或检索伸缩盒对象的子元素的排列方式 **/
    display:-moz-box;
    /*! autoprefixer: off */
    -moz-box-orient:vertical;
    -webkit-line-clamp: 3; /** 显示的行数 **/
  }
  .tl-container {
      padding-left: 100px;   /* LC width */
      cursor: pointer;
  }
  .tl-container:hover .tl-title {
    color: #94C05A;
  }
  .tl-container .tl-column {
      /* height: 50px; */
      position: relative;
      float: left;
      padding: 37px 0 21px 0;
  }
  .tl-content {
      width: 100%;
      height: 100px;
  }
  .tl-icon {
      width: 100px;
      height: 100px;        /* LC width */
      right: 100px;          /* LC width */
      margin-left: -100%;
  }
  .tl-content-desc {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
  }
</style>
